import styled from "styled-components";

export const BrowserWrapper = styled.div`

    position: fixed;
    z-index: 999;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color:rgba(4,4,4,1);
   
    .close{
        position: absolute;
        right: 15px;
        top: 10px;
    }

    .b-content{
       position: fixed;
       flex-direction: column;
       display: flex;
       align-items: center;
       justify-content: center;
        left: 0;
        right: 0;
        top: 0px;
        bottom: 0;
        margin: 0 auto;
       height: 100%;
       width: 100%;
       max-width: 105vh;
       

       img{
          width: 100%;
          height: 60%;
       }

       .top,.bottom{
           height:15%;
           width: 100%;
       }

       .bottom{
         .list{
            margin-top: 30px;
            .item-picture{
               position: relative;
               .cover{
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  right: 0;
                  left: 0;
                  background-color:rgba(0,0,0,.5)
               }

               .active{
                  opacity: 0;
               }
            }
         }
       }
       
    }

    .control{
        .left{
           position: absolute;
           left: 0px;
           top: 45%;
        }

        .right{
            position: absolute;
            right: 0;
            top: 45%;
        }

    }


`